<template>
    <!-- 浮游 植物 -->
  <div class="plankton-plant">
    <el-form :inline="true" :rules="rules" :model="form" ref="form">
      <el-form-item prop="quota" label="指标：">
        <el-select v-model="form.quota" placeholder="请选择" size="small">
          <el-option
            v-for="(item, index) in stationList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="createTime">
        <el-date-picker
          style="width: 350px"
          v-model="form.createTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          value-format="yyyy-MM-dd"
          align="right"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
        <!-- <el-button class="ml20" @click="handleReset" size="small">重置</el-button> -->
      </el-form-item>
    </el-form>
    <div class="mt20">
      <example class="chart mb20" :value="chartData" ref="chart" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import Example from '@/components/example.vue'
import options from '@/utils/chartOptions'
import { phyViewData } from '@/api/water'
export default {
  components: {
    Example
  },
  data () {
    return {
      form: {
        createTime: [],
        quota: ''
      },
      stationList: [
        {
          label: '蓝藻',
          value: 'cyanobacteria'
        },
        {
          label: '浮游植物总密度量',
          value: 'sum'
        },
        {
          label: '蓝藻百分比',
          value: 'cya'
        }
      ],
      chartData: {},
      rules: {
        createTime: [
          { required: true, message: '请选择查询范围', trigger: ['blur'] }
        ],
        quota: [{ required: true, message: '请选择指标', trigger: ['blur'] }]
      }
    }
  },
  created () {
  },
  methods: {
    getList () {
      let search = {
        startTime: this.form.createTime ? this.form.createTime[0] : '',
        endTime: this.form.createTime ? this.form.createTime[1] : ''
      }
      phyViewData(search).then(res => {
        if (res.code === 200) {
          let ndata = {}
          let data = []
          let xdata = []
          if (res.data.list) {
            res.data.list.forEach(e => {
              for (let key1 in e) {
                if (key1 === this.form.quota) {
                  data.push(e[key1])
                  xdata.push(e.time)
                }
              }
            })
          }
          let obj = {
            name: '',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: [],
            lineStyle: {
              normal: {
                width: 3
              }
            },
            ...options.colorList[Math.floor(Math.random() * options.colorList.length)]
          }

          this.chartData.xAxis.data = xdata
          this.chartData.series[0] = obj
          this.chartData.series[0].data = data
          this.chartData.yAxis.name = 'cells/ml'
          this.chartData.yAxis.nameTextStyle = {
            color: '#4b4b4b',
            fontSize: 16
          }
          this.chartData.title.text = this.form.lable
          this.$refs['chart'].getChartData(this.chartData)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    handleSearch () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.chartData = JSON.parse(JSON.stringify(options.option1))
          this.stationList.forEach(e => {
            if (this.form.quota == e.value) {
              this.form.lable = e.label
            }
          })
          this.getList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart{
  width: 100%;
  height: 500px;
}
</style>
